<template>
  <div class="warm-channel">
    <Card title="温馨通道">
      <template v-slot:content>
        <div class="item" v-for="item in list" :key="item.id">
          <a :href="item.href" class="channel">{{ item.title }}</a>
        </div>
      </template>
    </Card>
  </div>
</template>

<script>
import Card from '@/components/Card'
import { warmChannel } from '@/mock/slidbar'
import { getTips } from '@/api/comtent'
export default {
  name: 'warm-channel',
  data () {
    return {
      list: warmChannel
    }
  },
  components: { Card },
  created () {
    this._getTips()
  },
  methods: {
    _getTips () {
      getTips().then((result) => {
        if (result.code === 200) {
          this.list = result.data
        }
      }).catch((err) => {
        console.log(err)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.warm-channel {
  margin-bottom: 15px;
  .item {
    width: 50%;
    display: inline-block;
    text-align: center;
    .channel {
      padding: 15px 0px;
      display: inline-block;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
    }
  }
}
</style>
